<style scoped>
.div2 {
  width: 100%;
  height: 26px;
  position: absolute;
  top: 20px;
  display: flex;
  justify-content: space-around;
}
.div2 p{
  font-size: 22px;
   color: #444;
   line-height: 26px;
   text-align: center;
   width: 55%;
}

.van {
  font-size: 26px;
  color: #444;
 
  /* transform: translateX(-10px); */
}
.inp {
  color: #444;
 
  /* transform: translateX(10px); */
  font-size: 26px;
}
.div3 {
  width: 90%;
  margin: 80px auto;
}
.div4 {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #444444;
}
.va,
.va1 {
  font-size: 26px;
  color: #444444;
}
.div4 input {
  width: 70%;
  border: none;
}
.div5 {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #444444;
}
.inp1 {
  border: none;
  width: 80%;
}
.inp2 {
  height: 26px;
  width: 80px;
  color: white;
  font-size: 12px;
  border: none;
  border-radius: 16px;
  background-color: #444444;
}
.inp3 {
  width: 100%;
  height: 42px;
  margin-top: 40px;
  text-align: center;
  line-height: 42px;
  border: none;
  background-color: #d0011b;
  color: white;
}
.div6 {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #444444;
}
.div6 input {
  width: 80%;
}
.div7 {
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
}
.div7 p {
  line-height: 16px;
  font-size: 12px;
}
.div7 p:nth-of-type(2) {
  color: rgb(108, 108, 243);
}
</style>


<template>
  <div>
    <div class="div2">
      <van-icon class="inp" name="arrow-left" @click="fn" />
      <p>注册</p>
      <van-icon class="van" name="close" @click="fn1" />
    </div>
    <div class="div3">
      <div class="div4">
        <van-icon class="va" name="graphic" />
        <span>+86&nbsp;&nbsp;丨</span>
        <input type="text" placeholder="请输入用户名/手机号" v-model="username" />
      </div>
      <div class="div5">
        <van-icon class="va1" name="question" />
        <span>丨</span>
        <input class="inp1" type="text" placeholder="请输入密码" v-model="userpass" />
      </div>
      <div class="div5">
        <van-icon class="va1" name="checked" />
        <span>丨</span>
        <input class="inp1" type="text" placeholder="确认密码" v-model="confirmPass" />
      </div>
      <div class="div6">
        <van-icon class="va1" name="manager" />
        <span>丨</span>
        <input class="inp1" type="text" placeholder="好友潮流口令（选填）" v-model="msg" />
      </div>
      <input class="inp3" type="button" value="注  册" @click="regSave" />
      <div class="div7">
        <p>注册即表示你已阅读并同意</p>
        <p>有货用户服务协议 有货隐私条款</p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// import axios from "axios";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      username: "",
      userpass: "",
      confirmPass: "",
      msg: ""
    };
  },
  methods: {
    fn() {
      this.$router.push("/login");
    },
    fn1() {
      this.$router.push("/");
    },
    // async regSave() {
    //   // 1、前端验证

    //   let data = new URLSearchParams();
    //   data.append("username", this.username);
    //   data.append("userpass", this.userpass);
    //   // 2、发送请求
    //   let res = await axios({
    //     url: "user",
    //     method: "post",
    //     data
    //   });
    //   if (res.data) {
    //     // 注册成功
    //     Toast({
    //       icon: "chat-o",
    //       message: "注册成功！",
    //       onClose: function() {
    //         // 跳转页面
    //         console.log("hhhh");
    //       }
    //     });
    //   } else {
    //     this.msg = "注册失败………………";
    //   }
    // }
  }
};
</script>

